<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>实验3</title>
</head>

<body>
    <div class="bigbox">
        <!--<div class="imglogo">
            <img src="picture/logo.jpg" alt="">
        </div>-->
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    $(function getData() {
        $.ajax({
            type: "get",
            async: false,
            url: "http://localhost:8080/test/",
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //console.log(result);
                let vo = result;
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (vo != null) {
                    var option = {
                        title: { text: '负荷预测' },
                        tooltip: {},
                        legend: { data: ['实际', '预测'] },
                        xAxis: { data: result.li1 },
                        yAxis: {},
                        series: [
                            {
                                name: '实际',
                                type: 'line',
                                data: result.li2
                            },
                            {
                                name: '预测',
                                type: 'line',
                                data: result.li3
                            }
                        ]
                    }
                    myChart.setOption(option);
                } else {
                    alert("图表请求数据为空，您可以稍后再试！");
                    myChart.hideLoading();
                }
            },
            error: function (errorMsg) {
                alert("图表请求数据失败，可能是服务器开小差了");
                myChart.hideLoading();
            }
        })
    });
</script>
</html>



